<template>
	<view>
		<u-navbar title="订单详情" :autoBack="true" placeholder>
		</u-navbar>
		<view class="p8">
			<!-- 加载状态 -->
			<u-loading-page :loading="loading" bgColor="#F5F5F5" loadingColor="#24C98F" fontSize="14"
				loadingText="数据加载中" iconSize="40"></u-loading-page>
			<view v-if="!loading">
				<view class="status-box flex-align py-8 px-16 br-8">
					<image src="/static/image/dd-icon.png" mode="aspectFill"></image>
					<view class="flex-1 ps-8 fw-500 fs-15 lh-2 color-28302E">订单状态</view>
					<view class="fw-500 fs-15 lh-2 color-24C98F">{{ getStatusText(orderDetail.status) }}</view>
				</view>
				<view class="bg-fff px-16 py-8 br-8 mt-8">
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">服务类型</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.categoryName || '陪诊服务' }}</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">医疗机构</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.hospitalName || '未填写医院' }}</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">就诊科室</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.department || '未填写科室' }}</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">就诊人</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.patientName || '' }}</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">服务时间</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.serviceTime || '未安排' }}</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">联系电话</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.patientContactPhone || '未填写联系方式' }}
						</view>
						<image src="/static/image/call-button.png" mode="aspectFill" class="call-button"
							@click="callPhone(orderDetail.patientContactPhone)"></image>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">紧急联系人1电话</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.emergencyContact1 || '未填写联系方式' }}
						</view>
					</view>
					<view class="flex-align py-16 border-box">
						<view class="flex-1 fs-15 fw-500 #28302E lh-2">紧急联系人2电话</view>
						<view class="fw-400 fs-15 lh-2 color-5F6865">{{ orderDetail.emergencyContact2 || '未填写联系方式' }}
						</view>
					</view>
					<view class="flex-1 fs-15 fw-500 #28302E lh-2 pt-16">病情描述/服务备注</view>
					<view class="fw-400 fs-14 color-5F6865 lh-2 mt-8">
						{{ orderDetail.remark || '未填写' }}
					</view>
					<view class="image-box mt-10" v-if="orderDetail.attachments">
						<u-row gutter="10">
							<u-col span="3" v-for="(item,index) in orderDetail.attachments.split(',')" :key="index">
								<view class="image-item mt-8">
									<image :src="item" mode="aspectFill"></image>
								</view>
							</u-col>
							<u-col span="3" v-if="orderDetail.attachmentsPdf">
								<view class="image-item mt-8" @click="openPDf">
									<image src="/static/image/fj-image.png" mode="aspectFill"></image>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>

			</view>
			<view class="br-8 bg-fff p16 mt-8">
				<view class="flex-align mb-16">
					<view class=" flex-1 fs-18 fw-500 color-28302E lh-2">就诊记录</view>
				</view>
				<block v-if="healthRecords && healthRecords.length > 0">
					<view class="flex process-box" v-for="(item,index) in healthRecords" :key="index">
						<view class="process-left">
							<view class="line"></view>
						</view>
						<view class="process-right flex-1 ps-20">
							<view class="flex-align">
								<view class="flex-1">
									<view class="fs-12 fw-400 color-5F6865">{{ item.createTime || '未知时间' }}</view>
									<view class="fw-500 fs-14 color-5F6865 mt-8">
										{{ item.hospitalName || '' }}{{ item.department ? '，' + item.department : '' }}
									</view>
								</view>
								<block v-if="index == 0 && orderDetail.isCompanionRecord && orderDetail.status != 2">
									<u-button type="primary" size="mini" icon="edit-pen" text="补充修改"
										@click="editRecords(item)"
										customStyle="background-color: #24C98F;color:#fff;border:none;width:144rpx;"></u-button>
								</block>
							</view>
							<view class="fw-400 fs-14 color-5F6865 lh-2 mt-8" v-if="item.recordContent">
								{{ item.recordContent }}
							</view>
							<view class="image-box" v-if="item.images && item.images.length > 0">
								<u-row gutter="10">
									<u-col span="3" v-for="(imageItem,imageIndex) in item.images.split(',')"
										:key="imageIndex">
										<view class="image-item mt-8"
											@click="lookImage(item.images.split(','),imageIndex)">
											<image :src="imageItem" mode="aspectFill"></image>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<u-empty mode="list" text="暂无就诊记录"></u-empty>
				</block>
			</view>
			<!-- 评价 -->
			<view class="br-8 bg-fff p16 mt-8" v-if="review.updateTime">
				<view class="flex-align mb-16">
					<view class=" flex-1 fs-18 fw-500 color-28302E lh-2">用户评价</view>
				</view>
				<view class="evaluate-box br-8">
					<view class="flex-align">
						<image :src="review.userAvatar" mode="aspectFill" class="evaluate-header-image"
							style="background-color:#F5F5F5;">
						</image>
						<view class="flex-1 ps-10">
							<view class="flex-align">
								<view class="fs-16 fw-500 color-28302E flex-1 lh-2">{{review.userName}}</view>
								<u-rate :count="5" :value="review.rating || 0" size="16" activeColor="#FFBD23" readonly
									inactiveIcon="star-fill" inactiveColor="#999"></u-rate>
							</view>
							<view class="flex-align fw-400 fs-12 color-999 pt-4 lh-2">
								<view class="flex-1">服务：{{ orderDetail.productName || '陪诊服务' }}</view>
								<view>{{ review.createTime || '' }}</view>
							</view>
						</view>
					</view>
					<view class="lh-2 fs-13 fw-400 color-000 pt-10" v-if="review.reviewContent">
						{{ review.reviewContent }}
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="footer bg-fff px-10 pt-8 flex-align"
				:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
				<u-button text="确定接单" v-if="orderDetail.status == 2"
					customStyle="background-color: #E58F2D;color:#fff;border:none;margin-right:8rpx;"
					@click="acceptOrder"></u-button>
				<u-button text="填写跟进" v-if="!orderDetail.isCompanionRecord && orderDetail.status != 2"
					@click="toFollowUp"
					customStyle="background-color: #24C98F;color:#fff;border:none;margin-left:8rpx;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 4,
				orderNumber: '', // 订单号
				orderDetail: {
					isCompanionRecord: true
				}, // 订单详情
				review: null, // 评价信息
				healthRecords: [], // 就诊记录
				loading: true,
				// 订单状态映射
				statusMap: {
					2: '待接单',
					3: '待服务',
					4: '服务中',
					5: '待评价',
					6: '已完成'
				}
			}
		},
		onLoad(options) {
			this.orderNumber = options.orderNumber;
			this.getOrderDetail();
		},
		onShow() {
			this.getOrderDetail();
		},
		methods: {
			//打开PDF
			openPDf() {
				uni.downloadFile({
					url: this.orderDetail.attachmentsPdf, // 文档的网络地址
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							// 2. 下载成功后打开文档
							uni.openDocument({
								filePath: downloadResult.tempFilePath, // 使用下载后的临时路径
								fileType: 'pdf', // 明确指定文件类型
								showMenu: true,
								success: (res) => {
									console.log('文档打开成功');
								},
								fail: (err) => {
									console.error('打开文档失败:', err);
									uni.showToast({
										title: '打开失败，请重试',
										icon: 'none'
									});
								}
							});
						} else {
							console.error('文件下载失败，状态码:', downloadResult.statusCode);
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
						uni.showToast({
							title: '下载失败，请检查网络',
							icon: 'none'
						});
					}
				});
			},
			//补充修改
			editRecords(item) {
				console.log(item);
				const obj = encodeURIComponent(JSON.stringify(item));
				const ysObj = encodeURIComponent(JSON.stringify(this.orderDetail.follow));
				uni.navigateTo({
					url: `/pages/home/followUp?orderId=${this.orderDetail.id}&hospitalName=${this.orderDetail.hospitalName}&orderNumber=${this.orderNumber}&obj=${obj}&ysObj=${ysObj}`
				})
			},
			//图片预览
			lookImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index
				});
			},
			acceptOrder() {
				uni.showModal({
					title: '确认接单',
					content: '确定要接受这个订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.get({
								url: '/companion/order/service/accept',
								loadingTip: '处理中...',
								data: {
									orderNumber: this.orderNumber
								},
								success: (resp) => {
									this.$f.msg('接单成功');
									this.getOrderDetail();
								},
								fail: (err) => {
									this.$f.msg('接单失败，请稍后重试');
								}
							});
						}
					}
				});
			},
			getOrderDetail() {
				this.$api.get({
					url: `/companion/order/service/detail/${this.orderNumber}`,
					success: res => {
						if (res) {
							this.orderDetail = res || {};
							this.review = res.reviews || null;
							this.healthRecords = res.healthRecords || [];
						} else {
							this.$f.msg('获取订单详情失败');
						}
						this.loading = false;
					}
				});
			},
			// 获取状态文本
			getStatusText(status) {
				return this.statusMap[status] || '未知状态';
			},
			// 拨打电话
			callPhone(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
			toFollowUp() {
				uni.navigateTo({
					url: `/pages/home/followUp?orderId=${this.orderDetail.id}&hospitalName=${this.orderDetail.hospitalName}&orderNumber=${this.orderNumber}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.status-box {
		background: #F6FFFC;
		border: 1px solid #24C98F;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.border-box {
		border-bottom: 1px solid #F2F6F5
	}

	.call-button {
		margin-left: 20rpx;
		width: 112rpx;
		height: 48rpx;
	}

	.image-box {

		::v-deep .u-row {
			flex-wrap: wrap !important;
		}

		.image-item {
			width: 100%;
			height: 0rpx;
			height: 0;
			padding-bottom: 100%;
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
	}

	.process-box {
		$selected-bg: #24C98F; //选中颜色
		$not-selected-bg: #D2D0CE; //未选中颜色
		position: relative;

		&.active-process {
			.line {
				background-color: $selected-bg !important;

				&::after {
					background-color: $selected-bg !important;
				}
			}
		}

		&.current-process {
			.line {
				background-color: $not-selected-bg !important;
			}
		}

		.process-left {
			position: absolute;
			top: 40rpx;
			left: 4rpx;
			bottom: 0;

			.line {
				position: relative;
				width: 4rpx;
				height: 100%;
				border-radius: 8rpx;
				background-color: $selected-bg;

				&::after {
					content: ' ';
					position: absolute;
					top: -30rpx;
					left: 50%;
					margin-left: -10rpx;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: $selected-bg;
				}
			}
		}

		.process-right {
			min-height: 80rpx;
			padding-bottom: 40rpx;
		}

	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}

	.evaluate-box {
		.evaluate-header-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>